<template>
  <view class="search-bar-box">
    <uni-search-bar :focus="true" @confirm="search" @input="input" placeholder="请输入搜索内容" :radius="100"
      cancelButton="none"></uni-search-bar>
  </view>

  <!-- 搜索建议列表 -->
  <view class="sugg-list" v-if="kw.length !== 0">
    <view class="sugg-item" @click="goDetail(item)" v-for="(item, index) in searchList" :key="index">
      <view class="goods-name">{{ item.goods_name }}</view>
      <uni-icons type="arrowright" size="16"></uni-icons>
    </view>
  </view>

  <!-- 搜索历史 -->
  <view class="history-box" v-else>
    <!-- 标题区域 -->
    <view class="history-title">
      <text>搜索历史</text>
      <uni-icons type="trash" size="17" @click="clear"></uni-icons>
    </view>
    <!-- 列表区域 -->
    <view class="history-list">
      <view class="tag-view">
        <uni-tag @click="gotoDetail(item)" inverted="true" circle="true" size="small" type="primary" :text="item"
        v-for="(item, index) in kws" :key="index"></uni-tag>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

const kws = ref([]); // 创建响应式变量

onMounted(() => {
  const kwData = uni.getStorageSync('kw');
  if (kwData) {
    kws.value = JSON.parse(kwData); // 解析并赋值给响应式变量
  } else {
    console.log('没有找到历史记录');
  }
});

// 点击搜索历史跳转商品列表页面
function gotoDetail(item) {
  uni.navigateTo({
    url: '/subpkg/goods_list/goods_list?query=' + item
  })
}
// 清楚历史记录
function clear() {
  uni.setStorageSync('kw', '[]');
  historyList.value = [];
}
// 计算并且保留搜索数据先后顺序
const histories = computed(() => {
  return Array.from(new Set([...historyList.value].reverse()));
})
// 保留搜索历史记录
function setSearchHistory() {
  // 检查 kw.value 是否为空字符串
  if (kw.value.trim() !== '') {
    historyList.value.push(kw.value); // 只有在不为空时才保存
  }
  // 存到本地存储
  uni.setStorageSync('kw', JSON.stringify(histories.value));
}
// 历史数据列表
const historyList = ref([])
// 点击跳转到商品详情
function goDetail(item) {
  uni.navigateTo({
    url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
  })
}

// 搜索数据列表
const searchList = ref([])

// 获取搜索数据列表
async function getSearchList() {
  // 判断kw是否为空
  if (kw.length === 0) {
    searchList.value = []
    return
  }
  // 发起请求，获取请求列表
  const res = await uni.$http.get('/api/public/v1/goods/qsearch', {
    query: kw.value
  })
  if (res.data.meta.status === 200) {
    searchList.value = res.data.message
  }
}

// 延时器的timerId
const timer = ref(null); // 确保 timer 在函数外部定义

// 搜索关键词
const kw = ref('')

function input(e) {
  // 清除内部对应的延时器
  clearTimeout(timer.value);
  // 重新设置延时器
  timer.value = setTimeout(() => {
    // 500毫秒后执行
    kw.value = e; // 这里可以处理关键字
    getSearchList()
  }, 500);
  // 保存搜索关键字
  setSearchHistory()
}
</script>

<style>
.search-bar-box {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #fff;
  /* 背景颜色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
}

/* 搜索建议列表开始 */
.sugg-list {
  padding: 0 5px;
  background-color: #f9f9f9;
  /* 建议列表背景颜色 */
  border-radius: 8px;
  /* 边框圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
}

.sugg-item {
  font-size: 12px;
  padding: 13px 0;
  border-bottom: 1px solid #efefef;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.goods-name {
  /* 文本不换行 */
  white-space: nowrap;
  /* 文本溢出隐藏 */
  overflow: hidden;
  /* 文本溢出显示省略号 */
  text-overflow: ellipsis;
  /* 与图标一起使用时的距离 */
  margin-right: 3px;
  color: #333;
  /* 字体颜色 */
}

/* 搜索建议列表结束 */
/* 搜索历史开始 */
.history-box {
  padding: 0 5px;
}


.history-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  font-size: 13px;
  border-bottom: 1px solid #efefef;
}

.history-list {
  display: flex;
  /* 自动换行 */
  flex-wrap: wrap;
}

.history-list uni-tag {
  margin-top: 5px;
  margin-right: 5px;
}

/* 搜索历史结束 */
</style>